<template>
  <div class='toast'>{{toastMessage}}
  </div>
</template>
<script>
import {reactive,toRedfs} from 'vue';
export const useToastEffect=()=>{
     const toastData=reactive({
         show:false,
         toastMessage:"",
     })
     const showToast=(msg)=>{
         toastData.show=true;
         toastData.toastMessage=msg;
         setTimeout(() => {
             toastData.show=false;
             toastData.toastMessage=''
         }, 2000);
     }
     //返回
     return {
         ...toRedfs(toastData),
         showToast
     }
}

export default {
      data(){
          return {};
      }
}
</script>
<style lang='scss' scoed>
.toast {
    position:fixed;
    left:50%;
    top:50%;
    
}
</style>